<template>
  <div class="team-learning">
    <!-- 导航栏 -->
    <el-header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300"
      :class="{ 'shadow-md': scrollY > 50 }">
      <div class="container mx-auto px-4 py-3 flex items-center justify-between aaa">
        <!-- 左侧 Logo -->
        <div class="flex items-center space-x-2 bbb">
          <i class="fa fa-users text-primary text-2xl" style="color: #165dff; font-size: 24px;"></i>
          <span class="text-xl font-bold text-primary"
            style="color: #165dff; font-size: 24px; font-weight: bold;">组队学习</span>
        </div>
        <!-- 中间菜单 -->
        <el-menu mode="horizontal" class="flex-1 flex justify-center bg-white border-none shadow-none"
          style="background: white; width: 350px; ">
          <el-menu-item index="1"><a href="#match" class="text-gray-600 hover:text-primary transition-colors"
              style="text-decoration: none; font-size: 16px;">匹配组队</a></el-menu-item>
          <el-menu-item index="2"><a href="#complete" class="text-gray-600 hover:text-primary transition-colors"
              style="text-decoration: none; font-size: 16px;">完成组队</a></el-menu-item>
          <el-menu-item index="3"><a href="#game" class="text-gray-600 hover:text-primary transition-colors"
              style="text-decoration: none; font-size: 16px;">学习游戏</a></el-menu-item>
        </el-menu>
        <!-- 右侧 登录按钮 -->
        <div class="flex items-center space-x-4">
          <el-button type="primary" class="rounded-full px-6" @click="goToLogin">
            <i class="fa fa-user-circle mr-1"></i> 登录
          </el-button>
        </div>
      </div>
    </el-header>

    <!-- 主内容区 -->
    <main class="flex-grow">
      <!-- 英雄区域 -->
      <section class="bg-gradient-to-br from-primary/90 to-secondary/90 text-white py-16 md:py-24"
        style="background-color: #4460f2; margin: 0 0 20px 0 ; ">
        <div class="container mx-auto px-4"
          style="width: 1200px; height: 600px; display: flex; justify-content: center; align-items: center;">
          <div style="width: 12000px; height: 400px; display: flex;">
            <el-row justify="center">
              <el-col :xs="24" :md="12">
                <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight mb-4"
                  style="color: #fff; font-size: 60px;">
                  找到志同道合的学习伙伴
                </h1>
                <p class="text-lg md:text-xl opacity-90 mb-8 max-w-xl" style="color: #fff; font-size: 20px;">
                  通过AI智能匹配，找到与你学习进度和目标一致的伙伴，一起进步，互相监督，共同成长。
                </p>
                <div class="flex flex-wrap gap-4 ">
                  <el-button type="primary" @click="handleScrollToMatch"
                    class="rounded-full px-8 py-4 text-lg font-bold border-2"
                    style="background: #fff; color: #165dff; border-color: #165dff;">
                    立即匹配 <i class="fa fa-arrow-right ml-2"></i>
                  </el-button>
                  <el-button class="rounded-full px-8 py-4 text-lg font-bold border-2"
                    style="background: #165dff; color: #fff; border-color: #fff;">
                    <i class="fa fa-play-circle mr-2"></i> 观看介绍
                  </el-button>
                </div>
              </el-col>
              <el-col :xs="24" :md="12">
                <div class="relative z-10 animate-float" style="width: 480px; height: 300px;">
                  <img src="https://picsum.photos/id/237/600/400" alt="学习伙伴"
                    class="rounded-xl shadow-2xl w-full h-full object-cover">
                  <!-- 右下角覆盖组件 -->
                  <div class="absolute bottom-0 right-0 z-20 bg-white text-primary p-4 rounded-lg shadow-lg"
                    style="margin: 16px;">
                    <div class="flex items-center"
                      style="width: 160px; height: 80px; background-color: #fff; border-radius: 10px; padding: 10px; display: flex; align-items: center; justify-content: center;">
                      <i class="fa fa-users text-2xl mr-3"
                        style="font-size: 30px;color: #165dff;margin-right: 5px;"></i>
                      <div>
                        <div class="text-xs opacity-70" style="font-size: 16px;color: #165dff">已成功组队</div>
                        <div class="text-xl font-bold" style="font-size: 24px; color: #165dff;font-weight: bold">10,000+
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full bg-primary/30 rounded-full blur-3xl -z-10">
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </section>

      <!-- 统计数据 -->
      <section class="py-12 bg-white" style="display: flex; justify-content: center; align-items: center;">
        <div class="container mx-auto px-4">
          <el-row :gutter="20" class="ccc">
            <el-col :xs="12" :sm="6">
              <el-card shadow="hover" class="text-center rounded-xl ddd"
                style="background-color: #f2f3f6;border-radius: 10px;">
                <div class="text-3xl md:text-4xl font-bold text-primary mb-2 eee" style="color: #165dff;">500+</div>
                <div class="text-gray-600">活跃学习小组</div>
              </el-card>
            </el-col>
            <el-col :xs="12" :sm="6">
              <el-card shadow="hover" class="text-center rounded-xl ddd"
                style="background-color: #f2f3f6;border-radius: 10px;">
                <div class="text-3xl md:text-4xl font-bold text-primary mb-2 eee" style="color: #165dff;">10,000+</div>
                <div class="text-gray-600">注册用户</div>
              </el-card>
            </el-col>
            <el-col :xs="12" :sm="6">
              <el-card shadow="hover" class="text-center rounded-xl ddd"
                style="background-color: #f2f3f6;border-radius: 10px;">
                <div class="text-3xl md:text-4xl font-bold text-primary mb-2 eee" style="color: #165dff;">98%</div>
                <div class="text-gray-600">满意度</div>
              </el-card>
            </el-col>
            <el-col :xs="12" :sm="6">
              <el-card shadow="hover" class="text-center rounded-xl ddd"
                style="background-color: #f2f3f6;border-radius: 10px;">
                <div class="text-3xl md:text-4xl font-bold text-primary mb-2 eee" style="color: #165dff;">50+</div>
                <div class="text-gray-600">学习领域</div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </section>

      <!-- 匹配组队模块 -->
      <div style="margin-top: 100px;">
        <MatchComponent />
      </div>

      <!-- 完成组队模块 -->
      <CompleteComponent />
      <!-- 学习游戏模块 -->
      <GameComponent />

      <!-- CTA区域 -->
      <section
        class="flex items-center justify-center min-h-[500px] w-full bg-gradient-to-br from-blue-500 to-purple-500 text-white">
        <div class="flex flex-col items-center justify-center w-full px-4 text-center"
          style="text-align: center;background-color: #4163f6;height: 300px;">
          <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-6"
            style="color: #fff;padding-top: 80px;font-size: 30px;">准备好开始你的学习之旅了吗？</h2>
          <p class="text-lg opacity-90 mb-8 max-w-2xl mx-auto" style="color: #fff;font-size: 15px;">
            加入我们的组队学习平台，找到志同道合的学习伙伴，一起成长，一起进步</p>
          <el-button style="background-color: #fff;color: #165dff;height: 50px;"
            class="px-8 py-4 bg-white text-blue-600 rounded-full font-medium hover:bg-gray-100 transition-all shadow-lg hover:shadow-xl transform hover:-translate-y-1 text-lg flex items-center justify-center"
            @click="handleScrollToMatch">
            立即加入 <i class="fa fa-arrow-right ml-2"></i>
          </el-button>
        </div>
      </section>
    </main>

    <!-- 页脚重写 -->
    <footer class="bg-dark text-white py-12" style="background-color: #1d212a;">
      <div class="container mx-auto px-4">
        <div class="w-full flex flex-col md:flex-row justify-between items-stretch gap-8" style="display: flex;justify-content: space-between;">
          <!-- 组队学习 -->
          <div class="qqq">
            <div class="flex-1 flex flex-col items-center text-center">
              <div class="flex items-center justify-center space-x-2 mb-4">
                <i class="fa fa-users text-primary text-2xl" style="color: #165dff;margin-right: 5px;"></i>
                <span class="text-xl font-bold" style="color: #fff;">组队学习</span>
              </div>
              <p class="text-gray-400 mb-4" style="color: #9ca3b0;font-size: 14px;">通过AI智能匹配，找到与你学习进度和目标一致的伙伴，一起进步，互相监督，共同成长。</p>
              <div class="flex space-x-4 justify-center">
                <a href="#" class="text-gray-400 hover:text-white transition-colors"><i class="fa fa-weibo" style="margin-right: 15px;color: #9ca3b0;"></i></a>
                <a href="#" class="text-gray-400 hover:text-white transition-colors"><i class="fa fa-wechat" style="margin-right: 15px;color: #9ca3b0;"></i></a>
                <a href="#" class="text-gray-400 hover:text-white transition-colors"><i class="fa fa-github" style="margin-right: 15px;color: #9ca3b0;"></i></a>
              </div>
            </div>
          </div>

          <!-- 功能导航 -->
           <div class="qqq">
            <div class="flex-1 flex flex-col items-center text-center">
            <h4 class="text-lg font-bold mb-4" style="color: #fff;">功能导航</h4>
              <li style="list-style: none;"><a href="#match" class="text-gray-400 hover:text-white transition-colors" style="text-decoration: none;color: #9ca3b0">匹配组队</a></li>
              <li style="list-style: none;"><a href="#complete" class="text-gray-400 hover:text-white transition-colors" style="text-decoration: none;color: #9ca3b0">完成组队</a></li>
              <li style="list-style: none;"><a href="#game" class="text-gray-400 hover:text-white transition-colors" style="text-decoration: none;color: #9ca3b0">学习游戏</a></li>
              <li style="list-style: none;"><a href="#" class="text-gray-400 hover:text-white transition-colors" style="text-decoration: none;color: #9ca3b0">学习社区</a></li>
          </div>
           </div>
          
          <!-- 帮助中心 -->
           <div class="qqq">
            <div class="flex-1 flex flex-col items-center text-center">
            <h4 class="text-lg font-bold mb-4" style="color: #fff;">帮助中心</h4>
              <li style="list-style: none;"><a href="#" class="text-gray-400 hover:text-white transition-colors" style="text-decoration: none;color: #9ca3b0">常见问题</a></li>
              <li style="list-style: none;"><a href="#" class="text-gray-400 hover:text-white transition-colors" style="text-decoration: none;color: #9ca3b0">使用教程</a></li>
              <li style="list-style: none;"><a href="#" class="text-gray-400 hover:text-white transition-colors" style="text-decoration: none;color: #9ca3b0">意见反馈</a></li>
              <li style="list-style: none;"><a href="#" class="text-gray-400 hover:text-white transition-colors" style="text-decoration: none;color: #9ca3b0">联系我们</a></li>
          </div>
           </div>
          
          <!-- 订阅更新 -->
           <div class="qqq">
            <div class="flex-1 flex flex-col items-center text-center">
            <h4 class="text-lg font-bold mb-4" style="color: #fff;">订阅更新</h4>
            <p class="text-gray-400 mb-4" style="color: #9ca3b0;">订阅我们的更新，获取最新的学习资源和活动信息</p>
            <div class="flex justify-center">
              <el-button
                class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">订阅</el-button>
            </div>
          </div>
           </div>
          
        </div>
        <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"style="text-align: center;">
          <p style="color: #9ca3b0;">&copy; 2025 蜗牛学院114期学员</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import MatchComponent from './teamlearning/MatchComponent.vue';
import CompleteComponent from './teamlearning/CompleteComponent.vue';
import GameComponent from './teamlearning/GameComponent.vue';

const router = useRouter();
const scrollY = ref(0);

const isLoggedIn = () => !!localStorage.getItem('token');
const requireLogin = (callback) => {
  console.log('requireLogin called, isLoggedIn:', isLoggedIn());
  if (!isLoggedIn()) {
    console.log('User not logged in, redirecting to login');
    router.push('/login');
    return;
  }
  console.log('User is logged in, executing callback');
  callback && callback();
};

const handleScrollToMatch = () => {
  requireLogin(() => {
    document.getElementById('match')?.scrollIntoView({ behavior: 'smooth' });
  });
};

const goToLogin = () => {
  router.push('/login');
};

onMounted(() => {
  window.addEventListener('scroll', () => {
    scrollY.value = window.scrollY;
  });
});
</script>

<style scoped>
:root {
  --primary: #165DFF;
  --secondary: #722ED1;
  --success: #00B42A;
  --warning: #FF7D00;
  --dark: #2c3e50;
}

.team-learning {
  background-color: #fff;
}

.aaa {
  display: flex;
  align-items: center;
  justify-content: space-between;

}

.bbb {
  align-items: center;
}

.ccc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  width: 1200px;
  height: 100px;
  border-radius: 10px;
}

.ddd {
  width: 200px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f2f3f5;
  border-radius: 10px;
  border: none;
  /* box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); */
}

.eee {
  font-size: 40px;
  color: #165dff;
  font-weight: bold;
}

.qqq{
  width: 300px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-primary {
  color: var(--primary);
}

.bg-dark {
  background-color: var(--dark);
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0px);
  }
}

:deep(.el-header) {
  padding: 0 !important;
}

:deep(.el-menu-item) {
  padding: 0 15px !important;
}

:deep(.el-button) {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

:deep(.el-card) {
  transition: all 0.3s ease;
}

:deep(.el-card:hover) {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

:root {
  --primary: #165DFF;
  --secondary: #722ED1;
  --success: #00B42A;
  --warning: #FF7D00;
  --dark: #2c3e50;
  --card-radius: 20px;
  --card-shadow: 0 8px 32px rgba(22, 93, 255, 0.08), 0 1.5px 4px rgba(0, 0, 0, 0.04);
}

:deep(.el-card) {
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  transition: box-shadow 0.3s, transform 0.3s;
  background: #fff;
}

:deep(.el-card:hover) {
  box-shadow: 0 16px 40px rgba(22, 93, 255, 0.12), 0 3px 8px rgba(0, 0, 0, 0.08);
  transform: translateY(-6px) scale(1.02);
}

:deep(.el-button) {
  border-radius: 999px;
  font-size: 1rem;
  padding: 0.75em 2em;
}

:deep(.el-input__inner),
:deep(.el-select),
:deep(.el-radio-group) {
  border-radius: 999px;
  min-height: 44px;
  font-size: 1rem;
}

.section-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: bold;
  margin-bottom: 1.5rem;
  color: var(--primary);
  letter-spacing: 1px;
}

.section-subtitle {
  font-size: 1.25rem;
  color: #666;
  margin-bottom: 2.5rem;
  opacity: 0.85;
}

.bg-section {
  background: linear-gradient(135deg, #f8faff 0%, #f3f0ff 100%);
  border-radius: 2rem;
  padding: 3rem 2rem;
  margin-bottom: 2.5rem;
}

.container {
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

@media (max-width: 768px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
</style>